<template>
	<view class="enterprise">
		<view class="certification-title">
			证件上传
		</view>
		<view class="identity">
			<view class="identity-item">
				<view class="upload" @click="choosePhoto">
					<image class="idcode-bg" src="@/static/certification/idcode_bg3.png" mode=""></image>
					<image v-if="!form.businesslicenseimgs" class="photo-icon" src="@/static/user/upload_icon.png"
						mode=""></image>
					<text v-if="!form.businesslicenseimgs">请上传企业营业执照</text>
					<image v-if="form.businesslicenseimgs" class="idcode-img" :src="form.businesslicenseimgs" mode="">
					</image>
				</view>
			</view>
		</view>
		<view class="identity-tips">
			*请确保证件边框完整、字迹清晰、亮度均衡
			<image v-if="info.is_status == 0 && disabled" src="@/static/certification/audit_icon1.png" mode=""></image>
			<image v-if="info.is_status == 1 && disabled" src="@/static/certification/audit_icon3.png" mode=""></image>
			<image v-if="info.is_status == 2 && disabled" src="@/static/certification/audit_icon2.png" mode=""></image>
		</view>
		<view class="certification-title">
			基础信息
		</view>
		<view class="form">
			<u--form labelPosition="left" :model="form" ref="uForm" labelWidth="auto">
				<u-form-item label="企业名称" prop="name" borderBottom>
					<text class="must">*</text>
					<u--input inputAlign="right" :readonly="disabled" v-model="form.name" border="none" placeholder="请输入企业名称"></u--input>
				</u-form-item>
				<u-form-item label="证件类型" prop="certificate_type" borderBottom>
					<text class="must">*</text>
					<dwu-picker :disabled="disabled" placeholder="请选择证件类型" :defaultVal="form.certificate_type"
						:columns="idcodeTypeList" @onconfirm="confirmIdcodeType"></dwu-picker>
				</u-form-item>
				<u-form-item label="证件代码" prop="cart" borderBottom>
					<text class="must">*</text>
					<u--input inputAlign="right" :readonly="disabled" v-model="form.cart" border="none" placeholder="请输入证件代码"></u--input>
				</u-form-item>
				<u-form-item label="公司联系人" prop="corporation_name" borderBottom>
					<text class="must">*</text>
					<u--input inputAlign="right" :readonly="disabled" v-model="form.corporation_name" border="none"
						placeholder="请输入公司联系人"></u--input>
				</u-form-item>
				<u-form-item label="联系人电话" prop="phone" borderBottom>
					<text class="must">*</text>
					<u--input inputAlign="right" :readonly="disabled" type="number" v-model="form.phone" maxlength="11" border="none"
						placeholder="请输入联系人电话"></u--input>
				</u-form-item>
				<u-form-item label="联系人电子邮箱" prop="email" borderBottom>
					<text class="must">*</text>
					<u--input inputAlign="right" :readonly="disabled" v-model="form.email" border="none" placeholder="请输入联系人电子邮箱"></u--input>
				</u-form-item>
				<u-form-item label="法人代表" prop="person_name" borderBottom>
					<text class="must">*</text>
					<u--input inputAlign="right" :readonly="disabled" v-model="form.person_name" border="none"
						placeholder="请输入法人代表"></u--input>
				</u-form-item>
				<u-form-item label="法人代表电子邮箱" prop="person_email">
					<text class="must">*</text>
					<u--input inputAlign="right" :readonly="disabled" v-model="form.person_email" border="none"
						placeholder="请输入法人代表电子邮箱"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="form" style="margin-top: 26rpx;">
			<u--form labelPosition="left" :model="form" ref="uForm" labelWidth="auto">
				<u-form-item label="公司地址" prop="address" borderBottom>
					<dwu-chooseLocation :disabled="disabled" :defaultVal="form.address" placeholder="请选择公司地址"
						@onconfirm="confirmAddress"></dwu-chooseLocation>
				</u-form-item>
				<u-form-item label="服务区域" prop="area_id" borderBottom>
					<text class="must">*</text>
					<dwu-picker :disabled="disabled" placeholder="请选择服务区域" keyName="city" keyVal="id"
						:defaultVal="form.area_id" :columns="areaList" @onconfirm="confirmArea"></dwu-picker>
				</u-form-item>
				<u-form-item label="申请备注" prop="remark_message">
					<u--input inputAlign="right" :readonly="disabled" v-model="form.remark_message" border="none"
						placeholder="请输入申请备注"></u--input>
				</u-form-item>
			</u--form>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			info: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				form: {
					businesslicenseimgs: ''
				},
				idcodeTypeList: [
					[{
							label: '统一社会信用代码',
							type: 3
						},
						{
							label: '营业执照机构代码',
							type: 4
						}
					]
				],
				areaList: [],
				disabled: false
			};
		},
		watch: {
			info(val) {
				this.form.businesslicenseimgs = val.businesslicenseimgs
				this.form.name = val.name
				this.form.certificate_type = val.certificate_type
				this.form.cart = val.cart
				this.form.corporation_name = val.corporation_name
				this.form.phone = val.phone
				this.form.email = val.email
				this.form.person_name = val.person_name
				this.form.person_email = val.person_email
				this.form.address = val.address || ''
				this.form.area_id = val.area_id
				this.form.remark_message = val.remark_message || ''
				if (val.is_status == 0 || val.is_status == 1 || val.is_status == 2) {
					this.disabled = true
				}
			}
		},
		created() {
			this.cityList()
		},
		methods: {
			cityList() {
				this.request.http('/index/cityList', 'post').then(res => {
					let data = res.data
					if (data.code == 1) {
						this.areaList = [data.data]
					}
				})
			},
			choosePhoto() {
				if (this.disabled) return
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.upload.file('/Common/upload', res.tempFilePaths[0], 'file')
							.then(file => {
								uni.hideLoading()
								file = JSON.parse(file)
								if (file.code == 1) {
									this.form.businesslicenseimgs = file.data.fullurl
									console.log(this.form);
									uni.showToast({
										title: '上传成功'
									})
								} else {
									uni.showToast({
										title: '上传失败',
										icon: 'none'
									})
								}
							})
					}
				})
			},
			confirmIdcodeType(e) {
				this.form.certificate_type = e.value[0].type
			},
			confirmAddress(e) {
				this.form.address = e.address
			},
			confirmArea(e) {
				this.form.area_id = e.value[0].id
			}
		}
	}
</script>

<style lang="less">
	.enterprise {
		.certification-title {
			padding-left: 26rpx;
			margin-top: 34rpx;
			margin-bottom: 16rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 31rpx;
			color: #474747;
			line-height: 42rpx;
		}

		.identity {
			padding: 0 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.identity-item {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				.upload {
					position: relative;
					width: 284rpx;
					height: 160rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					margin-bottom: 8rpx;

					.idcode-bg {
						position: absolute;
						top: 0;
						left: 0;
						z-index: 1;
						width: 100%;
						height: 100%;
					}

					.photo-icon {
						position: relative;
						z-index: 10;
						width: 46rpx;
						height: 44rpx;
						margin-bottom: 14rpx;
					}

					text {
						position: relative;
						z-index: 10;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 23rpx;
						color: #999999;
					}

					.idcode-img {
						position: relative;
						z-index: 10;
						width: 100%;
						height: 100%;
					}
				}

				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 23rpx;
					color: #999999;
					line-height: 33rpx;

					text {
						color: #9CC963;
					}
				}
			}
		}

		.identity-tips {
			position: relative;
			padding-left: 32rpx;
			margin-top: 16rpx;
			margin-bottom: 10rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 21rpx;
			color: #999999;
			line-height: 56rpx;

			image {
				position: absolute;
				top: 0;
				right: 52rpx;
				z-index: 10;
				width: 136rpx;
				height: 114rpx;
			}
		}

		.form {
			padding: 16rpx 25rpx;
			background-color: #fff;
			border-radius: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 27rpx;
			color: #313131;

			/deep/.u-form-item__body__left__content__label {
				font-size: 27rpx;
				color: #313131;
			}

			input {
				padding-right: 30rpx;
				font-weight: 400;
				font-size: 27rpx !important;
			}

			/deep/.u-form-item {
				position: relative;
			}

			.must {
				position: absolute;
				top: 28rpx;
				margin-left: -6rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 23rpx;
				color: #D55252;
			}
		}

		.certificate {
			margin: 18rpx 0;
			padding: 34rpx 25rpx;
			background-color: #fff;

			.certificate-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 34rpx;

				.left {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 27rpx;
					color: #313131;
				}

				.right {
					display: flex;
					align-items: center;

					image {
						margin-right: 10rpx;
						width: 26rpx;
						height: 26rpx;
					}

					text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 27rpx;
						color: #B0DD67;
					}
				}
			}

			input {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 27rpx;
			}
		}



	}
</style>